<template>
    <div class="leftNav fl">
        <div class="title">派团助手</div>
        <ul class="navList">
            <li v-for="(item,index) in navList" class="firstMenu">
                <router-link :to="{path: '/' + item.modelName}" class="first" :class="{active:selected==item.modelName}" :key="index" @click.native="tabSwitch(item)">{{item.title}}</router-link>
                <ul class="secondMenu" :class="{show:selected==item.modelName}">
                    <li :class="{curActive:sec==nn}" v-for="(menu,nn) in item.secondMenu" @click="secSwitch(index,nn)">
                        {{menu}}
                    </li>
                </ul>
           </li>
        </ul>
        <div class="wrap"></div>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                moduleName:'',
                sec:-1,
                route:1,
                navList:[
                  {'title':'行程管理','modelName':'stroke','secondMenu':''},
                //   {'title':'导游日志','modelName':'journal','secondMenu':''},
                //   {'title':'派团管理','modelName':'group','secondMenu':''},
                //   {'title':'导游管理','modelName':'guider','secondMenu':''},
                //   {'title':'旅行社','modelName':'travelgency','secondMenu':''},
                //   {'title':'客户资料','modelName':'clients','secondMenu':''},
                {'title':'产品管理','modelName':'product','secondMenu':''}
                ],
            }
        },
        methods:{
            tabSwitch(index){//模块切换时
                if(this.route==1){
                    this.$emit('sub-nav',' ');
                    this.route=0;
                }else{
                    this.$emit('sub-nav','');
                    this.route=1;
                }
                this.sec=-1;
            },
            secSwitch(index,nn){//二级菜单的高亮显示
                this.sec=nn;
                var modelname=this.navList[index];
                this.$emit('sub-nav',modelname.secondMenu[nn]);

              if(modelname.modelName === 'stroke'){
                this.$store.commit('TOGGle_STROKE_COMPONENT_BTN',0);
              }else if(modelname.modelName === 'journal'){
                this.$store.commit('TOGGle_JOURNAL_COMPONENT_BTN',0);
              }else if(modelname.modelName === 'guider'){
                this.$store.commit('TOGGle_GUIDER_COMPONENT_BTN',0);
              }else if(modelname.modelName === 'travelgency'){
                this.$store.commit('TOGGle_TRAVELGENCY_COMPONENT_BTN',0);
              }else if(modelname.modelName === 'group'){
                this.$store.commit('TOGGle_GROUP_COMPONENT_BTN',0);
              }else if(modelname.modelName === 'clients'){
                this.$store.commit('TOGGle_CLIENTS_COMPONENT_BTN',0);
              }else if(modelname.modelName === 'test'){
                this.$store.commit('TOGGle_TEST_COMPONENT_BTN',0);
              }else if(modelname.modelName === 'product'){
                this.$store.commit('TOGGle_PRO_COMPONENT_BTN',0);
              }
            },
            refresh(item){//切换菜单 刷新页面
                // 解决a标签的默认状态   重新加载页面，清空vuex状态管理的数据 tabList数据
                window.location.href = '#'+item;
                setTimeout(function(){
                    window.location.reload();
                },30)
            }
        },
        mounted(){
            var self = this;
        },
        props:['selected']
    }
</script>
<style lang="scss" scoped>
    .leftNav{
        background-color:#fff;
        width:15%;
        margin-bottom:-30000px;
        padding-bottom:30030px;
        float:left;
        border-right: 1px solid #e6e1df;
        box-sizing: border-box;
        // overflow: hidden;
        // height: auto !important;
    }
    .title{
        color: #fff;
        font-size: 22px;
        text-indent: 70px;
        height: 60px;
        line-height: 60px;
        background: url('../../assets/images/logo.png') no-repeat 20px center;
        background-color: #09ba79;

    }
    .navList{
        width:100%;
        overflow:hidden;
        padding-top:30px;
        a,li{
            width:100%;
            font-size: 14px;
            box-sizing:border-box;
            cursor:pointer;
        }
        /*一级菜单*/
        .firstMenu{
            color:#666;
            .first{
                height: 40px;
                line-height: 40px;
                display:block;
                padding-left: 52px;
                background: url('../../assets/images/default.png') no-repeat 20px center;
            }
            .first:hover{
                color: #09ba79;
                trasition:.2s;
            }
            .active{
                color: #09ba79;
                background-color: #f5f5f5;
                border-left: 4px solid #09ba79;
                background-image:url('../../assets/images/arrow_down.png');
            }
        }

        /*二级菜单*/
        .secondMenu{
            margin-left: 57px;
            // padding-bottom: 10px;
            display:none;
            li{
                height: 36px;
                line-height: 36px;
            }
            li::before{
                content:'';
                display:inline-block;
                border:3px solid #78716c;
                border-radius:50%;
                margin-right: 8px;
                position: relative;
                top: -2px;
            }
            li:hover{
                color:#09ba79;
                trasition:.2s;
            }
            .curActive{
                color:#09ba79;
            }
        }
    }
</style>
